<template>
  <div class="add-edit-menu-wrapper">
    <CustomDialog
      ref="modal"
      title="新增/编辑菜单"
      width="550px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <a-spin :spinning="loading">
        <a-form-model
          ref="ruleForm"
          class="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="form"
          :rules="rules"
        >
          <!-- <a-form-model-item label="KeyID" prop="keyId">
            <a-input v-model="form.keyId"></a-input>
          </a-form-model-item> -->
          <a-form-model-item label="菜单名称" prop="name">
            <a-input v-model="form.name"></a-input>
          </a-form-model-item>
          <a-form-model-item label="菜单路径" prop="path">
            <a-input v-model="form.path"></a-input>
          </a-form-model-item>
          <a-form-model-item label="菜单状态" prop="status">
            <a-switch v-model="form.status"></a-switch>
          </a-form-model-item>
          <a-form-model-item label="菜单类型" prop="type">
            <a-radio-group v-model="form.type" @change="onChange">
              <a-radio :value="1"> 菜单 </a-radio>
              <a-radio :value="2"> 功能 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </a-spin>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CustomDialog from '@/components/admin/manage/carrier/common/CustomDialog/index.vue'
import { upsertCustomerTypeMenu } from '@/api/customerType'
export default {
  components: { CustomDialog },
  data() {
    return {
      type: 1,
      node: '',
      treeData: '',
      loading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 15 },
      isShowDialog: false,
      form: {
        // keyId: '',
        name: '',
        path: '',
        status: true,
        type: 1,
      },
      rules: {
        name: [{ required: true, message: '请输入内容', trigger: 'blur', whitespace: true }],
        // path: [{ required: true, message: '请输入内容', trigger: 'blur', whitespace: true }],
        // status: [{ required: true, message: '请输入内容', trigger: 'change' }],
      },
    }
  },
  computed: {
    ...mapGetters('customerType', ['currentCustomerId', 'customerType']),
  },
  methods: {
    onChange() {
      console.log(this.form)
    },
    open(type, node, treeData) {
      this.type = type
      this.node = node
      this.treeData = treeData
      this.isShowDialog = true

      if (type === 2) {
        this.initForm()
      }
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true

          if (this.type === 1) {
            this.doAdd()
          } else if (this.type === 2) {
            this.doEdit()
          } else if (this.type === 0) {
            this.doAddLevel1()
          }

          console.log(this.treeData)
          upsertCustomerTypeMenu({
            id: this.currentCustomerId,
            customerType: this.customerType,
            menuList: this.treeData,
          }).then((result) => {
            console.log(result)
            this.loading = false
            this.$emit('onRefresh')
            this.$refs.ruleForm.resetFields()
            this.isShowDialog = false
          })
        }
      })
    },

    doAddLevel1() {
      const newChild = this.getParams()
      this.treeData.push(newChild)
    },

    doAdd() {
      const newChild = this.getParams()
      if (!this.node.children) {
        this.$set(this.node, 'children', [])
      }
      this.node.children.push(newChild)
    },

    doEdit() {
      const params = this.getParams()
      Object.keys(params).forEach((key) => {
        this.node[key] = params[key]
      })
    },
    getParams() {
      const { form } = this
      return {
        // keyId: form.keyId,
        name: form.name,
        path: form.path,
        status: form.status ? 1 : 0,
        type: form.type,
      }
    },
    initForm() {
      const { form, node } = this
      form.name = node.name
      form.path = node.path
      form.status = node.status === 1
      form.type = node.type
      // form.keyId = node.keyId
    },
    handleCloseDialog() {
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>
